<template>
  <div>
  	<top-bar :title="title" :titleShow="titleShow"></top-bar>
  	<div class="content follow-man con-bg">
  		<div class="list-box">
				<ol class="img-txt flex">
					<dl><img src="../../assets/head-img.png" height="111" width="111"></dl>
					<dl class="flex-1">
						<dd class="items-bet">
							<dl>
  							<dt>鲍比Bobby</dt>
  							<dt>WISDOM-交易所</dt>
							</dl>
							<div class="items-bot">
								<button class="btn-follow">关注</button>
							</div>
						</dd>
						<dd>
							<i>赢率<span class="gfc-orange2">55.5%</span></i>
							<i>盈利和亏损<span class="gfc-orange2">$ 46351</span></i>
						</dd>
					</dl>
				</ol>
  		</div>
			<div class="list-box personinfo">
				<p>鲍比Bobby买入 <span class="gfc-white span1">XAU/USD</span></p>
				<p class="p1">浮动盈亏 <span class="gfc-white"><i>$344.50<sup class="gfc-green">-35%</sup></i></span></p>
			</div>
			<div class="list-box state items-bet align-r">
				<div>
					<span class="gfc-green"><span class="icon icon-circle"></span>92个<br>可复制交易</span>
				</div>
				<div>
					<span class="gfc-white"><span class="icon icon-eye"></span>43人正在<br>关注本次交易</span>
				</div>
				<div>
					<span class="gfc-orange"><span class="icon icon-fire"></span>6人正在<br>复制本次交易</span>
				</div>
			</div>
			<div class="balance-line"></div>
			<div class="list-box items-bet copy">
				<div>
					<div class="stop-profit-loss gfc-green">
							<p>止损</p>
							<p class="p1"><i>$122256</i></p>
					</div>
					<button class="repeat-btn">
						<span class="span1">反向复制</span>
					</button>
					<p class="repeat-notes">他亏损！你获利</p>
				</div>
				<div>
					<div class="stop-profit-loss align-r gfc-orange">
							<p>止盈</p>
							<p class="p1"><i>$122256</i></p>
					</div>
					<button class="repeat-btn">
						<span class="span1">正向复制</span>
					</button>
					<p class="repeat-notes">他获利！你也获利</p>
				</div>
			</div>
  	</div>
  	<div class="content repeat-pop con-bg">
  		<div class="list-box">
	  		<ul class="items-bet">
	  			<li>
	  				<p>可用资金</p>
	  				<p>$3761.27</p>
	  			</li>
	  			<li>
	  				<p>可用资金</p>
	  				<p>$3761.27</p>
	  			</li>
	  		</ul>
	  		<div>选择手数: <input type="text"><span class="pull-right">UOSGND</span></div>
	  		<div class="clearfix"><span class="pull-right">UOSGND</span></div>
	  		<div>选择投资额：<input type="text"></div>
	  		<div class="balance-line"></div>
				<div class="list-box items-bet copy">
					<div class="stop-profit-loss gfc-green">
							<p>止损</p>
							<p class="p1"><i>$122256</i></p>
					</div>
					<div class="stop-profit-loss align-r gfc-orange">
							<p>止盈</p>
							<p class="p1"><i>$122256</i></p>
					</div>
				</div>
				<div><button class="btn-1">复制</button></div>
  		</div>
  	</div>
  </div>
</template>

<script>
  import topBar from '../../components/topBar/topBar.vue'
  export default {
    data() {
      return {
        title: '跟单交易',
        titleShow: true
      }
    },
    components: {
      topBar
    }
  }
</script>

<style scoped>
.content.follow-man, .content.repeat-pop {
	font-size: .16rem;
	color: #6A747F;
}
.follow-man, .repeat-pop {
	padding: 0;
	margin: .44rem .15rem;
	border-radius: .3rem;
	border-bottom: .01rem solid  #6a747f;
}
.list-box {
	color: #6a747f;
	padding: 0.2rem .15rem;
	border-bottom: .01rem solid  #6a747f;
}
.btn-container {
	overflow: hidden;
}
button {
	background: #F25E44;
	border-radius: .04rem;
	font-size: .16rem;
	line-height: .3rem;
	color: #fff;
	text-align: center;
}
button.btn-follow {
	width: .8rem;
}
button.repeat-btn {
	width: 1.50rem;
	height: .4rem;
	font-size: .18rem;
}
button.btn-1 {
	height: .44rem;
}
dl.txt-inline span {
	padding-left: .1rem;
}
/* 图文混排 */
ol.img-txt {
	overflow: hidden;
}
ol.img-txt dl {
	float: left;
}
ol.img-txt dl:nth-child(2) {
	padding-left: .1466rem;
}
ol.img-txt dl img {
	border-radius: 50%;
	height: .55rem;
	width: .55rem;
}
ol.img-txt dl dt {
	color: #fff;
	line-height: .13rem;
}
ol.img-txt dl dd, ol.img-txt dl dt {
	line-height: .13rem;
	padding-top: .2rem;
}
ol.img-txt dl dd:first-child, ol.img-txt dl dt:first-child {
	padding-top: 0;
}
ol.img-txt dl dd span {
	padding-left: .1rem;
}
ol.img-txt dl dd i:nth-child(2){
	padding-left: .37rem;
}
ol.img-txt dl dd i span {
	padding-left: .1rem;
}

.balance-line {
	height: .03rem;
	background: #303842;
	margin: 0.4rem 0 .3rem 0;
}
.personinfo i {
	font-size: .293rem;
}
.personinfo i sup {
	font-size: .16rem;
	padding-left: .0866rem;
}
.personinfo .p1 {
	padding-top: .1966rem;
}
.personinfo .span1 {
	font-size: .19rem;
	padding-left: .09rem;
}
.state div {
	line-height: .24rem;
}
.state .icon {
	float: left;
  display: inline-block;
  width: .16rem;
  height: .16rem;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 0 .1rem;
}
.state .icon.icon-circle {
	background-image: url(../../assets/icon-circle.png);
}
.state .icon.icon-eye {
	background-image: url(../../assets/icon-eye.png);
}
.state .icon.icon-fire {
	background-image: url(../../assets/icon-fire.png);
}
.copy {
	border: none;
}
.copy p.repeat-notes {
	text-align: center;
	font-size: .14rem;
	padding-top: .08333rem;
}
.copy .p1 {
	padding-top: .18rem;
}
.copy i {
	font-size: .24rem;
}
.stop-profit-loss {
	padding: 0rem 0 .2rem 0;
}


/* 复制弹出层 */
.repeat-pop ul{
	padding: 
}
</style>
